<!-- 页面管理 -->
<template>
  <el-container>
    <el-main>
      <!-- 搜索 -->
      <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="formInline.title" placeholder="请输入页面名称" />
          </el-form-item>

          <el-form-item label="路径">
            <el-input v-model="formInline.path" placeholder="请输入页面名称" />
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="formInline.status" placeholder="请选择状态">
              <el-option label="已发布" value="1" />
              <el-option label="草稿" value="0" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 表格 -->
      <el-card>
        <div v-if="multipleSelection.length">
          <el-button @click="issueAll(1)"> 发布 </el-button>

          <el-button @click="issueAll(0)"> 草稿 </el-button>

          <el-button @click="delAll"> 批量删除 </el-button>
        </div>

        <el-table
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />

          <el-table-column prop="title" label="名称" width="200" />

          <el-table-column prop="path" label="路径" width="200" />

          <el-table-column prop="orders" label="顺序" width="200" />

          <el-table-column prop="reading" label="阅读量" width="100">
            <template #default="scope">
              <div class="reading-box">
                <span>{{ scope.row.reading }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="status" label="状态" width="200">
            <template #default="scope">
              <div class="status-box">
                <span :class="scope.row.status ? 'true' : 'false'"></span>
                <span>{{ scope.row.status ? "已发布" : "草稿" }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="createtime" label="发布时间" width="200" />

          <el-table-column label="操作" width="300" fixed="right">
            <template #default="scope">
              <div class="btn-box">
                <el-button type="text">编辑</el-button>

                <el-button type="text" @click="issue(scope.row.id)">
                  {{ scope.row.status ? "下线" : "发布" }}
                </el-button>

                <el-button type="text">查看访问</el-button>

                <el-popconfirm
                  title="确认删除这个文章?"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  @confirm="delItem(scope.row.id)"
                >
                  <template #reference>
                    <el-button type="text"> 删除 </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange"
        >
        </el-pagination>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { apiPage, apiIssuePage, apiPageDel } from "@/api/page";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";

const list = ref([]);

const page = ref({
  current: 1,
  size: 10,
});

const total = ref(0);

// 查询
const formInline = ref({
  title: "",
  path: "",
  status: "",
});

const search = () => {
  getList();
};

// 重置
const reset = () => {
  formInline.value.title = "";
  formInline.value.path = "";
  formInline.value.status = "";

  getList();
};

const getList = () => {
  apiPage({ ...page.value, ...formInline.value }).then((res) => {
    list.value = res.data;

    total.value = res.total;
  });
};

// 分页
const currentChange = (pageIndex) => {
  page.value.current = pageIndex;

  getList();
};

// 发布/下线
const issue = (id) => {
  apiIssuePage({ id }).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 批量发布/下线
const issueAll = (status) => {
  apiIssuePage({ status, multipleSelection: multipleSelection.value }).then(
    (res) => {
      ElMessage({
        message: res.msg,
        type: "success",
      });

      getList();
    }
  );
};

// 删除
const delItem = (id) => {
  apiPageDel({ id }).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 全部删除
const delAll = () => {
  apiPageDel(multipleSelection.value).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 多选数组
const multipleSelection = ref([]);

// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss"></style>
